<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.js"></script>
    <style>
    </style>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
    class NameForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                isGoing:true,
                name:''
            };

            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
        }

        handleChange(event) {
            const target = event.target;
            const name = target.name;
            const value = target.type == 'checkbox' ? target.checked : target.value;
            this.setState({
                [name]: value
            });
        }

        handleSubmit(event) {
            alert('A name: ' + this.state.isGoing);
            event.preventDefault();
        }

        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    <div>
                        <label>
                            Is going:
                            <input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleChange} />
                        </label>
                    </div>

                    <div>
                        <label>
                            Name:{this.state.value}
                            <input type="text" name="name" value={this.state.value} onChange={this.handleChange} />
                        </label>
                    </div>

                    <input type="submit" value="Submit" />
                </form>
            );
        }
    }
    ReactDOM.render(
            <NameForm />,
            document.getElementById('example')
    );
</script>
</body>
</html>